<!--  -->
<template>
  <div class="focusshop_con">
    <template v-for="(item,index) in shopList">
      <div class="focusshop_con_item show_public flex flex-column" :key="index">
        <router-link to="/" class="focusshop_con_left flex">
          <img src="../assets/imgs/WechatIMG6462.png" alt="">
          <div class="focusshop_con_rightcon flex flex-column justify-center">
            <div class="flex justify-between focusshop_con_name">
              <h2 class="f-14 color-black">第八号袜子铺</h2>
              <span class="color-red f-12">进店</span>
            </div>
            <div class="focusshop_con_goods">
              <span class="pr-8">86个商品</span>
              <span class="pl-6">上新3个</span>
            </div>
          </div>
        </router-link>
        <div class="focusshop_con_right flex">
          <div class="focusshop_con_picture flex">
            <img src="../assets/imgs/WechatIMG6462.png" alt="">
            <img src="../assets/imgs/WechatIMG6462.png" alt="">
            <img src="../assets/imgs/WechatIMG6462.png" alt="">
          </div>
          <div class="focusshop_con_pictureadd">
            <!-- <img src="" alt=""> -->
          </div>
        </div>
      </div>
    </template>
       <div class="no-data" v-if="shopList.length==0"></div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    shopList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.focusshop_con_item {
  padding: 7px 0 19px;
}
.focusshop_con_left {
  padding: 0 16px;
}
.focusshop_con_left img {
  width: 45px;
  height: 45px;
  border-radius: 100%;
}
.focusshop_con_right {
  margin-left: 64px;
  margin-top: 15px;
}
.focusshop_con_rightcon {
  padding-left: 13px;
  width: 82%;
  height: 45px;
  justify-content: flex-end;
}
.focusshop_con_goods {
  padding-top: 11px;
  color: #c1c1c1;
}
.focusshop_con_goods span:first-child {
  border-right: 1px solid #c1c1c1;
  display: inline-block;
}
.focusshop_con_picture img {
  width: 72px;
  height: 72px;
  margin-left: 8px;
}
.focusshop_con_pictureadd {
  position: relative;
  width: 40px;
}
.focusshop_con_pictureadd::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 34%;
  width: 13px;
  border-top: 1px solid #c1c1c1;
}
.focusshop_con_pictureadd::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  height: 13px;
  border-left: 1px solid #c1c1c1;
}
</style>